<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>开源中国 Chrome 浏览器插件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background: #f5f5f5;
        }

        a {
            text-decoration: none;
        }

        .body-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        .header-container {
            flex-shrink: 0;
            height: 64px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 22px;
            background: #fff;
        }

        .header-container img {
            display: block;
            height: 36px;
        }

        .header-container .search-wrap {
            margin-left: 36px;
            width: 100%;
            font-size: 0;
        }

        .header-container .search-wrap input {
            padding: 6px 16px;
            outline: 0;
            border: 1px solid #e0e0e0;
            border-radius: 6px 0 0 6px;
            border-right: 0;
            font-size: 14px;
            line-height: 22px;
            width: 380px;
        }

        .header-container .search-wrap .btn-search {
            font-size: 14px;
            line-height: 22px;
            height: 36px;
            border: 1px solid #e0e0e0;
            border-radius: 0 6px 6px 0;
            padding: 4px 16px;
            cursor: pointer;
            outline: 0;
        }

        .header-container .search-wrap .btn-search:hover {
            background: #eee;
        }

        .header-container .version-wrap {
            width: 100%;
            font-size: 0;
            text-align: right;
        }

        .header-container .version-wrap .btn-download {
            font-size: 14px;
            line-height: 22px;
            height: 36px;
            border: 1px solid #e0e0e0;
            border-radius: 6px 6px 6px 6px;
            padding: 4px 16px;
            cursor: pointer;
            outline: 0;
        }

        .header-container .version-wrap .btn-download:hover {
            background: #eee;
        }

        .panel-container {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: row;
            height: 100%;
            padding: 14px;
            overflow: hidden;
        }

        .panel {
            width: 25%;
            padding: 8px;
            box-sizing: border-box;
        }

        .panel__inner {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .panel__title {
            flex-shrink: 0;
            font-size: 18px;
            font-weight: 500;
            padding: 10px 14px;
            background: #fff;
            margin-bottom: 12px;
            color: #32aa66;
        }

        .list {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .list::-webkit-scrollbar {
            width: 4px !important;
            height: 4px !important;
            appearance: none;
        }

        .list::-webkit-scrollbar-thumb {
            cursor: pointer;
            background: rgba(153, 153, 153, 0.5);
            border-radius: 6px;
        }

        .list::-webkit-scrollbar-thumb:hover {
            background: rgba(153, 153, 153, 0.3);
        }

        .item {
            background: #fff;
            padding: 14px 14px;
            word-break: break-word;
        }

        .item:not(:last-child) {
            margin-bottom: 12px;
        }

        .item .title {
            font-size: 16px;
            line-height: 24px;
            color: rgba(0, 0, 0, .85);
            font-weight: 700;
        }

        .item .description {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-top: 6px;
            color: rgba(100, 100, 100, .87);
            font-size: 14px;
            line-height: 20px;
        }

        .item .description table tr td:first-child[width] {
            width: 44px !important;
            padding-right: 10px;
            padding-top: 2px;
        }

        .item .description table tr td:first-child[width] img {
            width: 100%;
        }

        .item .description table tr td:last-child {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }

        .item .pubDate {
            margin-top: 6px;
            font-size: 14px;
            line-height: 16px;
            color: rgba(0, 0, 0, .4);
        }
    </style>
    <script src="urls.js"></script>
    <script src="oschina.js"></script>
</head>

<body>
    <div class="body-container">
        <div class="header-container">
            <a class="logo" href="https://www.oschina.net?utm_source=oschina-chrome-extension" target="_blank">
                <img src="https://static.oschina.net/new-osc/img/logo_osc_new.svg" alt="OSCHINA">
            </a>
            <div class="search-wrap">
                <input id="txt-search" type="text" name="q" placeholder="搜索开源软件、资讯、技术文章" required>
                <button id="btn-search" type="button" class="btn-search">搜索</button>

            </div>
            <div class="version-wrap">
                <button id="btn-download" type="button" class="btn-download">下载源码</button>
            </div>
        </div>
        <div class="panel-container">
            <div class="panel">
                <div class="panel__inner">
                    <div id="newsTitle" class="panel__title">开源资讯</div>
                    <div id="newsList" class="list">
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="panel__inner">
                    <div id="blogsTitle" class="panel__title">推荐博客</div>
                    <div id="blogsList" class="list">
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="panel__inner">
                    <div id="projectsTitle" class="panel__title">开源软件</div>
                    <div id="projectsList" class="list">
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="panel__inner">
                    <div id="questionsTitle" class="panel__title">最新问答</div>
                    <div id="questoinsList" class="list">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>